<template>
  <div>
    <!-- <van-cell :to="'/article?id='+articleItem.art_id"> -->
    <van-cell :to="'/article/'+articleItem.art_id">
      <!-- 标题自定义插槽 -->
      <template #title>
        <div class="van-multi-ellipsis--l2">
          {{ articleItem.title }}
        </div>
      </template>
      <!-- 标题下方的插槽 -->
      <template #label>
        <div class="label-image" v-if="articleItem.cover.type===3">
          <van-image
            v-for="(item, index) in articleItem.cover.images" :key="index"
            fit="cover"
            :src="item"
          />
        </div>
        <div class="label-box">
          <span>{{ articleItem.aut_name }}</span>
          <span>{{ articleItem.pubdate | formatDate }}</span>
          <span>评论:{{ articleItem.comm_count }}</span>
        </div>
      </template>
      <!-- 右侧插槽 -->
      <template>
        <van-image class="right-image"
          v-if="articleItem.cover.type===1"
          fit="contain"
          :src="articleItem.cover.images[0]"
        />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    articleItem: {
      type: Object,
      require: true
    }
  },
  data () {
    return {

    }
  },

  created () {

  },

  methods: {

  }
}
</script>

<style scoped lang="less">
  .label-box{
    span:nth-child(2){
      margin: 0 8px;
    }
  }
  .van-cell__value{
    flex: unset;
    width: 232px;
    height: 146px;
    .right-image{
      width: 100%;
      height: 100%;
    }
  }
  .label-image{
    display: flex;
    .van-image{
      width: 232px;
      height: 146px;
    }
    .van-image:nth-child(2){
      margin: 0 4px;
    }
  }
</style>
